<template>
  <div class="ui_controlcards">

    <van-nav-bar title="银行卡">
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    <div class="success_empty">
    </div>
    <div class="cards" @click="goToWithdrawDeposit">
      <div class="cards_icon">
      </div>
      <div class="cards_font">
        <p class="cards_font_one">添加银行卡</p>
        <p class="cards_font_two"> 单笔限额5万 单日限额10万</p>
      </div>
      <div class="num">
        <p>****</p>
        <p>****</p>
        <p>****</p>
        <p>1234</p>
      </div>
    </div>
    <div class="control">
      <div>更换银行卡</div>
      <div class="control_v">解绑银行卡</div>

    </div>
  </div>
</template>
<script>
  export default {
    name: 'ControlCards',
    methods: {
      back() {
        this.$router.go(-1);
      },
      goToWithdrawDeposit() {
        if (this.$route.params.from === 'withdrawDeposit') {
          this.$router.push('/withdrawdeposit');
        }
        //route 是当前方法 router是全局对象
      },
    },
  };
</script>
<style lang="less">
  .ui_controlcards {
    .success_empty {
      width: 750px;
      height: 30px;
    }
    .cards {
      font-size: 32px;
      height: 290px;
      //  border: 1px solid #000;
      line-height: 10px;

      width: 625px;
      margin: auto;
      border-radius: 30px;
      background-color: #f00;
      .cards_icon {
        margin-top: 50px;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background-color: #fff;
      }
      div {
        margin-left: 30px;
        float: left;
      }
      .cards_font {
        margin-top: 30px;
        color: #fff;
        width: 450px;
        .cards_font_one {
          font-size: 32px;
        }
        .cards_font_two {
          font-size: 26px;
          margin-left: 10px;
        }
      }
      .num {
        margin-left: 100px;
        p {
          float: left;
          padding-left: 50px;
          color: #fff;
        }
      }
    }
    .control {
      height: 90px;

      //   border: 1px solid #f00;
      width: 625px;
      margin: auto;
      text-align: right;
      div {
        margin-top: 50px;
        float: right;
        width: 150px;
        //  border: 1px solid #f00;
        color: #f7a427;
      }
      .control_v {
        border-right: 1px solid #e1e1e1;
        text-align: left;
      }
    }

  }
</style>
